<template>
  <div>
    <head-top signin-up="msite">
      <div @click="$router.push({path: `/search/geohash?geohash=${geohash}`})" class="link_search" slot="search">
        <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
          <circle cx="8" cy="8" r="7" stroke="rgb(255,255,255)" stroke-width="1" fill="none" />
          <line x1="14" y1="14" x2="20" y2="20" style="stroke:rgb(255,255,255);stroke-width:2" />
        </svg>
      </div>
      <div slot="msite-title" class="msite_title">
        <span class="title_text ellipsis">多田点餐平台</span>
      </div>
    </head-top>
    <div class="header_swiper">
      <!--轮播广告-->
      <div class="swiper-container swiper-container1">
        <div class="swiper-wrapper">
            <!-- <div class="swiper-slide header-swiper-slide" v-for="item in banner" :key="item.id">

            <img style="height: 5rem;width: 100%;"  src="../../images/banner1.png" />
            </div> -->
            <div class="swiper-slide header-swiper-slide"  v-for="(item, index) in banner" :key="index">
              <img style="height: 5rem;width: 100%;"  :src="imgBaseUrl+item.path" />
              </div>

          <!--div class="swiper-slide header-swiper-slide" style="background-color: bisque;">slider4</div-->
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination1"></div>
      </div>
    </div>
    <nav class="msite_nav">
      <div class="swiper-container swiper-no-swiping" v-if="foodTypes.length">
        <div class="swiper-wrapper">
          <div class="swiper-slide food_types_container" v-for="(item, index) in foodTypes" :key="index">

            <div @click="$router.push({path: '/food', query: {id: foodItem.id, name:foodItem.ftype, geohash: geohash}})"
              v-for="foodItem in item" :key="foodItem.id" class="link_to_food">
              <figure>
                <img :src="foodItem.imgurl" />
                <figcaption>{{foodItem.ftype}}</figcaption>
              </figure>
            </div>
          </div>
        </div>
        <!-- <div class="swiper-pagination"></div> -->
      </div>
      <img src="../../images/fl.svg" class="fl_back animation_opactiy" v-else />
    </nav>
    <div class="swipter_header" v-if="recommend.length">
      <header class="sc_header">
        <svg class="sc_icon">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#shop"></use>
        </svg>
        <span class="sc_header_title">推荐窗口</span>
      </header>
      <div class="my-swiper-container">
        <div class="swiper-wrapper">


          <div   style="float: left;" class="swiper-slide" v-for="foodItem in recommend" :key="foodItem.id">
            <img @click="gotoShop(foodItem)" :src="imgBaseUrl + foodItem.image_path" class="shop_img" />

            <div style="width: 3.8rem;" @click="gotoShop(foodItem)">

              <div class="title">{{foodItem.name}}</div>
              <div class="footer">月销{{foodItem.mouthorder}}单</div>
              <div class="footer">
               <div  class="manjiantitle" >
                  <span style="color: #ca0517;"  v-for="manjianItem in foodItem.manjian">
                    满{{manjianItem.mmoney}}减{{manjianItem.jmoney}}
                    </span>

                  </div>

                <!-- <div style="float: right;width: 30%;border-radius: 2px; background-color: #CD235C;text-align: center;">下单</div> -->
              </div>
            </div>
          </div>


        </div>
      </div>
    </div>
    <div class="shop_list_container">
      <header class="shop_header">
        <svg class="shop_icon">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#shop" />
        </svg>
        <span class="shop_header_title">商家列表</span>
      </header>
      <shop-list :msitePage="1" v-if="hasGetData" :geohash="geohash"></shop-list>
    </div>
    <!-- <foot-guide></foot-guide> -->
  </div>
</template>

<script>
  import {
    mapMutations
  } from "vuex";
  // import {imgBaseUrl} from 'src/config/env'
  import headTop from "src/components/header/head";
  import footGuide from "src/components/footer/footGuide";
  import shopList from "src/components/common/shoplist";

  import {
    msiteAddress,
    msiteFoodTypes,
    cityGuess,
    getTypeList,
    getActionShop
  } from "src/service/getData";
  import "src/plugins/swiper.min.js";
  import "src/style/swiper.min.css";



  export default {
    data() {
      return {
        geohash: "", // city页面传递过来的地址geohash
        msiteTitle: "请选择地址...", // msite页面头部标题
        foodTypes: [], // 食品分类列表
        recommend: [], //推荐窗口
        banner:[],
        hasGetData: false, //是否已经获取地理位置数据，成功之后再获取商铺列表信息
        imgBaseUrl: "http://www.zzzcdz.cn/" //图片域名地址
      };
    },


    async beforeMount() {
      // if (!this.$route.query.geohash) {
      //   const address = await cityGuess();
      //   this.geohash = address.latitude + "," + address.longitude;
      // } else {
      //   this.geohash = this.$route.query.geohash;
      // }
      this.geohash = "30.222377,119.70663";
      //保存geohash 到vuex
      this.SAVE_GEOHASH(this.geohash);
      //获取位置信息
      // let res = await msiteAddress(this.geohash);
      // this.msiteTitle = res.name;
      // 记录当前经度纬度
      // this.RECORD_ADDRESS(res);
      let res = {
        latitude: 30.222377,
        longitude: 119.70663
      };
      this.RECORD_ADDRESS(res);

      this.hasGetData = true;
    },
    mounted() {
      //获取导航食品类型列表
      getTypeList().then(data => {
        let res = data.data;
        let resLength = res.length;
        let resArr = [...res]; // 返回一个新的数组
        let foodArr = [];
        for (let i = 0, j = 0; i < resLength; i += 6, j++) {
          foodArr[j] = resArr.splice(0, 6);
        }
        this.foodTypes = foodArr;
        this.recommend = data.recommend;
        this.banner=data.banner;
        console.log(foodArr);
        console.log(data.recommend);

      }).then(res => {
        new Swiper(".swiper-container", {
          //pagination: ".swiper-pagination",
          loop: true
        });
        var mySwiper = new Swiper('.my-swiper-container', {
          loop: false,
          observeParents: false, //必须加入
          observer: true,
          autoplay: 2000,
          //speed:6000,
          slidesPerView: 2, //煤业显示的数量
          spaceBetween: 10, //每两张间隔
          //slidesPerGroup: 2,//每次最少滑动张数
          //slidesPerColumn: 2,//每列显示的张数
          autoplayStopOnLast: false,
          disableOnInteraction: true,
          autoplayDisableOnInteraction: false,
          //centeredSlides: true,
          freeMode: true, //是否自由滑动
          freeModeSticky: true, //自由活动下也能贴合边缘
          autoResize: false, //值为false时，窗口尺寸改变时，禁掉slides自适应
        });
      });
      var swiper = new Swiper('.swiper-container1', {
        pagination: ".swiper-pagination1",
        loop: true,
        autoplay: 2000,
        spaceBetween: 0,
        autoplayStopOnLast: false,
        disableOnInteraction: true,
        autoplayDisableOnInteraction: false,
      });

      // msiteFoodTypes(this.geohash)
      //   .then(res => {
      //     let resLength = res.length;
      //     let resArr = [...res]; // 返回一个新的数组
      //     let foodArr = [];
      //     for (let i = 0, j = 0; i < resLength; i += 8, j++) {
      //       foodArr[j] = resArr.splice(0, 8);
      //     }
      //     this.foodTypes = foodArr;
      //   })
      //   .then(() => {
      //     //初始化swiper
      //     new Swiper(".swiper-container", {
      //       pagination: ".swiper-pagination",
      //       loop: true
      //     });
      //   });
    },
    components: {
      headTop,
      shopList,
      footGuide
    },
    computed: {},
    methods: {
      ...mapMutations(["RECORD_ADDRESS", "SAVE_GEOHASH"]),
      // 解码url地址，求去restaurant_category_id值

   gotoShop(item) {

if (item.online == "200") {
        console.log(this.$router);
        this.$router.push({
          path: "shop",
          query: {
            geohash: this.geohash,
            id: item.id,
            shopImg: item.image_path,
            shopName: item.name,
            shopTime: item.needtime,
            piecewise_agent_fee: item.piecewise_agent_fee,
            promotion_info: item.promotion_info,
            activity: item.activity,
            condition: item.condition,
          },
        });
      } else {
        Toast.fail("该商户暂停营业");
      }

     }
      // getCategoryId(url) {
      //   let urlData = decodeURIComponent(
      //     url.split("=")[1].replace("&target_name", "")
      //   );
      //   if (/restaurant_category_id/gi.test(urlData)) {
      //     return JSON.parse(urlData).restaurant_category_id.id;
      //   } else {
      //     return "";
      //   }
      // }

    },
    watch: {}
  };
</script>

<style lang="scss" scoped>
  @import "src/style/mixin";

  .link_search {
    left: 0.8rem;
    @include wh(0.9rem, 0.9rem);
    @include ct;
  }

  .msite_title {
    @include center;
    width: 50%;
    color: #fff;
    text-align: center;
    margin-left: -0.5rem;

    .title_text {
      @include sc(0.8rem, #fff);
      text-align: center;
      display: block;
    }
  }

  .msite_nav {
    background-color: #fff;
    border-bottom: 0.025rem solid $bc;
    height: 3.8rem;

    .swiper-container {
      @include wh(100%, auto);
      padding-bottom: 0.6rem;
      padding-Top: 0.3rem;

      .swiper-pagination {
        bottom: 0.2rem;
      }
    }

    .fl_back {
      @include wh(100%, 100%);
    }
  }

  .food_types_container {
    display: flex;
    flex-wrap: wrap;

    .link_to_food {
      width: 16.3%;
      //padding: 0.3rem 0rem;
      @include fj(center);

      figure {
        img {
          margin-bottom: 0.3rem;
          @include wh(1.8rem, 1.8rem);
        }

        figcaption {
          text-align: center;
          @include sc(0.55rem, #666);
        }
      }
    }
  }

  .shop_list_container {
    margin-top: 0.4rem;
    border-top: 0.025rem solid $bc;
    background-color: #fff;

    .shop_header {
      .shop_icon {
        fill: #999;
        margin-left: 0.6rem;
        vertical-align: middle;
        @include wh(0.6rem, 0.6rem);
      }

      .shop_header_title {
        color: #999;
        @include font(0.55rem, 1.6rem);
      }
    }
  }

  .swipter_header {
    margin-top: .4rem;
    border-top: 0.025rem solid $bc;
    border-bottom: 0.025rem solid $bc;
    background-color: #fff;

    .sc_header {
      .sc_icon {
        fill: #999;
        margin-left: 0.6rem;
        vertical-align: middle;
        @include wh(0.6rem, 0.6rem);
      }

      .sc_header_title {
        color: #999;
        @include font(0.55rem, 1.6rem);
        height: 0.6rem;
      }
    }
  }

  .my-swiper-container {
    @include wh(100%, 3.2rem);
    margin: 0px auto;
    overflow: hidden;
  }

  .swiper-slide1 {
    display: flex;
    width: 50%; //!important;
    height: 3rem;
    padding: 1px;
    border-radius: 5px;
    margin-bottom: 5px;
    /* 设置圆角 */
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.1);
    border-style: solid;
    }

  .my-swiper-container .swiper-slide {
    display: flex;
    width: 50%; //!important;
    height: 3rem;
    padding: 1px;
    border-radius: 5px;
    margin-bottom: 5px;
    /* 设置圆角 */
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.1);
    border-style: solid;

    .title {
      white-space: nowrap;
      padding-left: 0.2rem;
      text-align: left;
      font-size: 0.55rem;
      overflow: hidden;
      max-width: 115px;
      text-overflow: ellipsis;
    }
    .manjiantitle{
       font-size: 0.55rem;
        max-width: 115px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
    }

    .footer {
      padding-top: 0.2rem;
      padding-left: 0.2rem;
      line-height: 0.85rem;
      font-size: .45rem;
    }

    img {
      width: 3rem;
      // border-radius: 20px;
      /* 设置圆角 上右下左 */
    }
  }

  .header-swiper-slide {
    @include wh(100%, 5rem);
  }

  .header_swiper {
    margin-top: 1.95rem;
    background-color: #fff;
    height: 5rem;

    .swiper-container {
      @include wh(100%, auto);

      .swiper-pagination {
        bottom: 0.2rem;
      }
    }
  }
</style>
